
  
  <template>
  <el-card class="page pageScroll">
    <el-tabs v-model="state.tab" style="background: #fff; padding: 10px">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane
        :label="item.label"
        :key="item.value"
        :name="item.value"
        v-for="item in CONST_VALUE.orderType1"
      ></el-tab-pane>
    </el-tabs>
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="订单编号" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          clearable
          class="!w-240px"
        ></el-input>
      </el-form-item>

      <el-form-item label="活动名称" prop="activityName">
        <el-input
          v-model="queryParams.activityName"
          clearable
          class="!w-240px"
        ></el-input>
      </el-form-item>

      <el-form-item label="下单日期" prop="time">
        <el-date-picker
          v-model="queryParams.time"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button
          type="success"
          plain
          v-hasPermi="['infra:config:export']"
          @click="onExport"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" :loading="loading">
      <el-table-column label="序号" align="center" prop="_index" />
      <el-table-column label="订单编号" align="center" prop="orderId">
      </el-table-column>
      <el-table-column label="下单时间" align="center" prop="createTime">
      </el-table-column>
      <el-table-column label="活动名称" align="center" prop="activityName">
      </el-table-column>
      <el-table-column label="活动封面" align="center" prop="activityCover">
        <template #default="scope">
          <el-image :src="scope.row.activityCover" />
        </template>
      </el-table-column>
      <el-table-column
        label="出行时间"
        align="center"
        prop="beginTime"
        width="200"
      >
        <template #default="scope">
          {{ scope.row.beginTime }} 至 {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column label="购买单价" align="center" prop="activityPrice">
        <template #default="scope">
          {{ toPrice(scope.row.activityPrice) }}
        </template>
      </el-table-column>
      <el-table-column label="购买数量" align="center" prop="buySize">
        <template #default="scope"> {{ scope.row.buySize }}份 </template>
      </el-table-column>
      <el-table-column label="购买总价" align="center" prop="payAmount">
        <template #default="scope">
          {{ toPrice(scope.row.payAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="购买人信息" align="center" prop="usernameStr">
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="status">
        <template #default="scope">
          <tag :value="scope.row.status" type="orderType" />
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" align="center" width="120px">
        <template #default="scope">
          <el-button link type="primary" @click="onEdit(scope.row.id)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination :="pagination" class="padding10" />
    <EditForm ref="editFromRef" @success="handleQuery" />
  </el-card>
</template>
    
  <script setup lang="ts">
import EditForm from './editForm.vue';
import API from '@/api/api';
import { CONST_VALUE } from '@/utils/const';
import { useTablePage } from '@/hooks/useTablePage';
import { transformTime } from '@/utils/transformTime';
import { toPrice } from '@/utils';

const router = useRouter();
const editFromRef = ref();
const state = reactive({
  tab: 'all',
});

const {
  queryParams,
  queryFormRef,
  loading,
  list,
  handleQuery,
  resetQuery,
  handleDelete,
  pagination,
  exportHandle,
} = useTablePage({
  queryApi: API.orderController.list,
  exportApi: API.orderController.export,
  transformQueryParams: transformTime,
  queryConfig: {
    refreshDeps: [() => state.tab],
    defaultParams: [
      reactive({
        status: computed(() => {
          return state.tab == 'all' ? undefined : state.tab;
        }),
      }),
    ],
  },
});

function onEdit(id?: number) {
  editFromRef.value.open(id);
}

function onExport() {
  exportHandle({
    fileName: '订单列表',
  });
}
</script>